<template>
  <div class="main-content">
    <haz-tree @selected="categoryCheckHandler"/>
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;padding-top: 5px;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <div class="radio-t" v-if="tabItem && tabItem.status==='0'" :key="tabItem.status">
            <el-radio-group v-model="models.selectFormModel.prepareStatus" @change="dataStatusChangeHandler" size="small">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">待确认</el-radio-button>
              <el-radio-button label="0">已关联</el-radio-button>
              <el-radio-button label="2">已核销</el-radio-button>
            </el-radio-group>
          </div>
          <div class="radio-t" ></div>
          <div class="radio-t" ></div>
          <div class="radio-t" ></div>
          <div class="radio-t" ></div>
          <div class="radio-t" ></div>
          <div class="radio-t" >
            <el-button v-if="tabItem && tabItem.status==='0'" style="margin-right: 20px;" size="small"  plain type="primary" @click="prepareCancelSubmit">批量核销</el-button>
            <el-button v-if="tabItem && tabItem.status==='0'" style="float: right" size="small" plain type="primary" @click="batchDataVerify">核对完成</el-button>
            <el-button v-if="tabItem && tabItem.status==='1'" style="float: right" size="small" plain type="primary" @click="prepareSuccessHandler">核对完成</el-button>
          </div>
        </div>
        <div class="ha-top">
          <div class="radio-t">
            <!-- <el-tree-select style="height: 30px;"  v-model="models.selectFormModel.areaId" :selectParams="dialog.selectParams"
                            :treeParams="dialog.areaTreeParams"
                             ref="areaTreeSelect" size="small"  @node-click="areaSelectHandler"/> -->
          </div>
        </div>
        <div style="padding: 10px">
          <template v-if="columns && columns.length > 0">
            <dynamic-data-table ref="dataTable"
                                :api="getTableData"
                                :options="options"
                                :columns="columns"
                                :operates="operates"
                                :query="models.selectFormModel"
                                @handle-selection-change="handleSelectionChange"/>

          </template>
          <el-empty v-else/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import HazTree from "@/views/quality/components/HazTree.vue";
import NTab from "@/components/NTab.vue";
import DynamicDataTable from "@/components/DataTable/DynamicDataTable.vue";
import {getUserList} from "@/api/user";
import {getPrepareTitle,getPrepareList} from '@/api/dataSearch';

import {prepareVerify, prepareSuccess, prepareCancel} from '@/api/dataPrepare';

import {userTreeSelectData} from '@/api/areaManager';
import { NumberValueElement } from 'docx';

@Component({
  methods: {getUserList},
  components: {DynamicDataTable, HazTree,NTab}
})
export default class hazard extends Vue {

  @Ref('dataTable') dataTable!:any;
  @Ref('areaTreeSelect') areaTreeSelect!:any;

  private getTableData = getPrepareList;


  models:any={
    selectFormModel:{
      categoryId:'',
      structureId:'',
      prepareStatus:'',
      searchStatus:'0',
      workId:'',
      areaId:'',
      id:'',
      ids:[],
      type:'0'
    }
  }
  columns: any =[];
  tabOptions:any=[{label:'未匹配数据核对',status:'0'},{label:'预置数据浏览',status:'1'}]
  tabItem:any = this.tabOptions[0];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };


  dialog: any = {
    dialogFormVisible: false,
    dialogImportVisible: false,
    isEdit: false,
    isBatchEditDisabled: true,
    isBatchRemoveDisabled: true,
    selectParams: {
      clearable: true,
      placeholder: '请选择'
    },
    areaTreeParams: {
      clickParent: true,
      filterable: true,
      accordion: true,
      defaultExpandAll:true,
      data: [],
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    }
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '数据核对',
        type: 'warning',
        icon: 'el-icon-edit',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 1;
        },
        visibled: (index:any,row:any) =>this.itemOperateVisibled(index,row,'0'),
        permission: 'bus:data:edit',
        method: (index: any, row: any) => {
          this.models.selectFormModel.type='0';
          this.models.selectFormModel.id = row.id;

          this.$router.push({ path: '/quality/dataVerify', query: this.models.selectFormModel});

        }
      },
      {
        label: '查看',
        type: 'warning',
        icon: 'el-icon-search',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 1;
        },
        visibled: (index:any,row:any) =>this.itemOperateVisibled(index,row,'1'),
        permission: 'bus:data:edit',
        method: (index: any, row: any) => {
          this.models.selectFormModel.type='1';
          this.models.selectFormModel.id = row.id;

          this.$router.push({ path: '/quality/dataVerify', query: {...this.models.selectFormModel,areaId:row.areaId}});

        }
      }
    ]
  };

  itemOperateVisibled(index,row, status){
      if(this.tabItem.status === status){
        return true;
      }
      return false;
  }

  tabCheckHandler(data){
    this.tabItem = {...data.item};

    this.models.selectFormModel.searchStatus = data.item.status;

    if(data.item.status === '1'){
      this.models.selectFormModel.prepareStatus='';
    }
    this.dataStatusChangeHandler('1');
  }

  areaSelectHandler(val){
    this.dataStatusChangeHandler('1');
  }

  getTitle(structureId?){
    if(structureId){
      getPrepareTitle({id:structureId}).then(res =>{
        this.columns = res.data.map(item=>({
          ...item,
          minWidth:item.minWidth?item.minWidth:150,
        }));
        this.dataStatusChangeHandler('1');
    })
    }else{
      getPrepareTitle().then(res =>{
        this.columns = res.data.map(item=>({
          ...item,
          minWidth:item.minWidth?item.minWidth:150,
        }));
        this.dataStatusChangeHandler('1');
    });
  }
  }

  prepareSuccessHandler(){
    if(!this.models.selectFormModel.categoryId){
      this.$message.error("请选择调查类别");
      return;
    }
    prepareSuccess(this.models.selectFormModel).then(res =>{
        if(res && res.data){
          this.dataTable.refresh();
        }
     })
  }

  batchDataVerify(){
    if(!this.models.selectFormModel.categoryId){
      this.$message.error("请选择调查类别");
      return;
    }
    if(!this.models.selectFormModel.ids || this.models.selectFormModel.ids.length == 0){
      this.$confirm('当前没有选择数据，是否核对完成该类别所有数据？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return prepareVerify(this.models.selectFormModel);
      }).then((response: any) => {
        this.dataTable.refresh();
        this.$message.success(response.msg);
      }).catch((e) => {
        console.error(e);
      });
    }else{
      prepareVerify(this.models.selectFormModel).then(res =>{
        if(res && res.data){
          this.dataTable.refresh();
        }
      })
    }
  }
  prepareCancelSubmit(){
    if(!this.models.selectFormModel.ids.length){
      this.$message.error("请选择要核销的数据");
      return;
    }
    this.$confirm('是否要进行核销？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      return prepareCancel(this.models.selectFormModel.ids);
    }).then((response: any) => {
      this.dataTable.refresh();
      this.$message.success(response.msg);
    }).catch((e) => {
      console.error(e);
    });
  }
  dataStatusChangeHandler(val){
    if(this.dataTable){
            this.dataTable.refresh();
    }
  }

  categoryCheckHandler(data){
   
    const {code, polygon, rootId, level} = data.extra;
    this.models.selectFormModel.workId =  rootId;
    if(code){
        this.getTitle(code);
        this.models.selectFormModel ={
          ...this.models.selectFormModel,
          categoryId: data.id,
          structureId: code,
          polygon: polygon || NumberValueElement,
        }

    }else{
        this.models.selectFormModel.categoryId=null;
        this.models.selectFormModel.structureId =null;
        if(level == 2){
          this.models.selectFormModel.midCategoryId =data.id;
          this.models.selectFormModel.bigCategoryId= null;

        }else if(level == 1){
          this.models.selectFormModel.bigCategoryId =data.id;
          this.models.selectFormModel.midCategoryId =null;
        }else{
          this.models.selectFormModel.bigCategoryId =null;
          this.models.selectFormModel.midCategoryId =null;
        }
        this.getTitle();

    }
  }
  private handleSelectionChange(val:any) {
    const ids = val.map((el:any) => el.id);
    this.models.selectFormModel.ids =ids;
  }

  mounted(){
    this.tabItem = this.tabOptions[0];
    userTreeSelectData().then(res =>{
        if(this.areaTreeSelect){
            this.areaTreeSelect.treeDataUpdateFun(res.data);
        }else{
          this.dialog.areaTreeParams.data = res.data;
        }

    }).catch(e =>{
      console.error(e);
    })
  }
}
</script>
<style lang="scss" scoped>
.hazard{
  display: flex;
  gap: 10px;
  .ha-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .radio-t{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    span{
      font-size: 14px;
    }
  }
}
.el-tree-select {
    height: 30px !important; /* 调整为你需要的高度 */
    input{
      height: 30px !important; /* 调整为你需要的高度 */
    }
}
.el-input__inner{
  height: 30px !important; /* 调整为你需要的高度 */
}


</style>
